<template>
  <div class="audit-comment-view">
    <item-title v-if="isShow" :title="title" />

    <el-table
      size="medium"
      :data="comments"
      align="center"
      border
      style="width: 100%"
    >
      <el-table-column align="center" prop="name" label="操作人员" />
      <el-table-column align="center" label="操作时间">
        <template slot-scope="scope">
          <span v-if="scope.row.Step" class="date">{{
            scope.row.Step.ApprovalAt
              ? dateFormat1("yyyy-mm-dd HH:MM:SS", scope.row.Step.ApprovalAt)
              : dateFormat1("yyyy-mm-dd HH:MM:SS", scope.row.StateTime)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ItemName" label="执行步骤" />
      <el-table-column align="center" prop="StateName" label="操作结果" />
      <el-table-column align="center" prop="remark" label="备注" />
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button size="medium" type="text" v-if="scope.row.isCheck" @click="onClick(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    <div class="comment-item-view" v-for="(item,index) in comments">-->

    <!--      <div class="item-left">-->
    <!--        <el-avatar shape="square" :size="50" :src="squareUrl">{{item.name}}</el-avatar>-->
    <!--      </div>-->

    <!--      <div class="item-right">-->

    <!--        <div class="item-right-top">-->

    <!--          <span class="name">{{item.Name}}</span>-->

    <!--          <span class="date">{{item.CreatedAt? dateFormat1('yyyy-mm-dd',item.CreatedAt) : ''}}</span>-->

    <!--          <el-tag v-if="item.StateName">{{item.StateName}}</el-tag>-->

    <!--        </div>-->

    <!--        <div class="item-remark">-->
    <!--          {{item.remark}}-->
    <!--        </div>-->

    <!--      </div>-->

    <!--    </div>-->
    <el-dialog v-if="showStepDetail" :append-to-body="true"  :visible="showStepDetail" position="bottom" @close="showStepDetail=false" closeable
               :title="selectStep.ItemName"
    >
      <div class="item stepDetail" >
        <el-form
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm input_form"
        >
          <el-row :gutter="10" v-for="item of selectStep.Step.Staff" :key="item.StaffId">
            <el-col :span="12">
              <el-form-item label="职员姓名" class=" gutter">
                <span>{{item.StaffName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="处理时间" class=" gutter">
                <span>{{item.ApprovalAt ? dateFormat1("yyyy-mm-dd HH:MM:SS", item.ApprovalAt) : dateFormat1("yyyy-mm-dd HH:MM:SS", item.StateTime)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="item.Template&& item.Template.Remark">
              <el-form-item label="备注" class=" gutter">
                <span>{{item.Template.Remark}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12"  v-if="item.Template&& item.Template.Files&& item.Template.Files.length">
              <el-form-item label="附件" class=" gutter">
                <uploadele
                  :isUpload="false"
                  :fileArr.sync="item.Template.Files"></uploadele>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import uploadele from "../approval/upLoadFile";
export default {
  name: 'Index',
    components:{uploadele},
  props: {
    datas: {
      type: Object,
      default: function() {
        return {}
      }
    },
    title: {
      type: String,
      default: '审批记录'
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      squareUrl: '',
      comments: [],
        selectStep:{},
        showStepDetail:false,
    }
  },
  watch: {
    datas: {
      handler: function(newV, oldV) {
        this.getHistory()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
      onClick:function(row){
          this.selectStep = row
          this.showStepDetail = true
      },
    getHistory: function() {
      this.comments = []
      if (this.datas.Steps && this.datas.Steps.length) {
        for (let i = 0; i < this.datas.Steps.length; i++) {
          let data = JSON.parse(JSON.stringify(this.datas.Steps[i]))

          if (!i) {
            data.ItemName = '发起'
          }

            if (data.State != 'Doing') {
              data.name = ''
            if (
              data.Step &&
              data.Step.Staff &&
              data.Step.Staff.length
            ) {
                for (let j = 0; j < data.Step.Staff.length; j++){
                    data.name = data.name + data.Step.Staff[j].StaffName
                    if (j != data.Step.Staff.length-1){

                        data.name = data.name + ","
                    }
                }
                data.isCheck = true;
            } else if (data.Step &&
                data.Step.Receivers &&
                data.Step.Receivers.length) {
                for (let j = 0; j < data.Step.Receivers.length; j++){
                    data.name = data.name + data.Step.Receivers[j].Name
                    if (j != data.Step.Receivers.length-1){

                        data.name = data.name + ","
                    }
                }
                data.isCheck = false;
            }else{
                data.name = '系统'
                data.isCheck = false;
            }


            data.StateName = ''

            if (!i) {
              data.StateName = ''
            } else if (data.Type == "Edit"){
                data.ItemName = '编辑'
                data.StateName = ''
            } else if (data.State == 'Cancel') {
                // data.StateName = '撤销'
                data.ItemName = '撤销'
            } else if (data.ItemName == '发起人'){

                data.ItemName = '发起'
            } else if (data.State == 'Refuse') {
              data.StateName = '拒绝'
            } else if (data.State == 'Done') {
              data.StateName = '同意'
            } else if (data.State == 'Reject') {
              data.StateName = '驳回'
            }

            if (data.Step && data.Step.Staff && data.Step.Staff.length) {
              data.remark = data.Step.Staff[0].Template
                ? data.Step.Staff[0].Template.Remark
                : ''
            }

            this.comments.push(data)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/views/projectManagement/audit/commentView.scss";
</style>
